<template>
    <div>
        <div style="margin: 20px 0;">
            <el-button type="primary" @click="handlerAdd">新增学校</el-button>
        </div>
     <el-table :data="schools" style="width: 100%; height: 500px;">
    <el-table-column type="index" label="序号" width="80"></el-table-column>
    <el-table-column prop="schoolname" label="学校名称"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row._id)">
          编辑
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.row._id)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页控件 -->
  <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 添加/编辑学校对话框 -->
    <el-dialog v-model="schoolFormVisible" title="添加/编辑学校" width="500">
    <el-form :model="school" label-width="100px" :rules="rules" style="width: 400px;" ref="schoolFormRef" label-position="right">
      <el-form-item label="学校名称" prop="schoolname">
        <el-input v-model="school.schoolname" aria-placeholder="请输入学校名称"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="school._id == null? addData(schoolFormRef) : updateData(schoolFormRef)">确定</el-button>
        <el-button @click="schoolFormVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus';
import { nextTick, onMounted, reactive, ref } from 'vue';
// 引入数据类型
import type { schoolInfoData } from '@/api/school/type';
// 引入学校小仓库
import useSchoolStore from '@/store/modules/school';
const schoolStore = useSchoolStore()
// 学校数据列表
const schools = ref<schoolInfoData[]>([])
// 新增/编辑学校数据
const school = ref<schoolInfoData>({
    _id: null,
    schoolname: '',
})
// 添加学校弹窗是否显示
const schoolFormVisible = ref(false)
// 表单ref对象
const schoolFormRef = ref()
// 表单校验规则
const rules = reactive<FormRules>({
    schoolname: [{ required: true, message:'请输入学校名称', trigger: 'blur' }]
})
// 打开添加学校对话框
const handlerAdd = ()=>{
    schoolFormVisible.value = true
    school.value = {
        _id:null,
        schoolname:''
    }
    // 清空表单数据
    nextTick(()=>{
        // @ts-ignore
        schoolFormRef.value.resetFields()
    })
}
// 获取学校列表
const getSchoolList = ()=>{
    schoolStore.getSchoolList({page:currentPage.value,size:pageSize.value}).then((response)=>{
        // @ts-ignore
        schools.value = schoolStore.schools
        total.value = response?.total as number
    })
}
// 添加学校
const addData = (formEl: FormInstance | undefined) => {
    if(!formEl) return
    formEl.validate((valid) => {
        if(valid){
            schoolStore.addSchool(school.value).then(()=>{
                schoolFormVisible.value = false
                getSchoolList()
            })
        }else{

        }
    })
}
// 当前页码
const currentPage = ref(1)
// 一页显示多少条数据
const pageSize = ref(5)
// 总数据条数
const total = ref(0)
// 当每页显示条数发生变化时回调函数
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getSchoolList()
}
// 当页码发生变化时回调函数
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getSchoolList()
}

// 打开编辑窗口
const handleEdit = (_id:string)=>{
    handlerAdd()
    schoolStore.getSchoolById(_id).then(response=>{
        // @ts-ignore
        school.value = response
    })
}
// 更新/编辑学校
const updateData = (formEl: FormInstance | undefined) => {
    if(!formEl) return
    formEl.validate((valid) => {
        if(valid){
            schoolStore.updateSchool(school.value).then(()=>{
                schoolFormVisible.value = false
                getSchoolList()
            })
        }else{

        }
    })
}
// 删除学校
const handleDelete = (_id:string)=>{
    ElMessageBox.confirm(
    '确定要删除此条数据吗？',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        schoolStore.deleteSchool(_id).then(()=>{
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            getSchoolList()
        })
    })
    .catch(() => {

    })
}
onMounted(()=>{
    getSchoolList()
})
</script>

<style scoped>

</style>